<!-- 推广二维码 -->
<template>
	<view v-if="showType">
		<!-- 二维码分销 -->
		<view class="index-box" v-if="showType == 1">
			<view class="code-box">
				<view class="img-box flex-ct">
					<view class="img-wrap flex-ct">
						<!-- #ifndef MP-ALIPAY || APP-PLUS -->
						<image :src="imgUrl" class="code-img" @click="showImg" show-menu-by-longpress></image>
						<!-- <image src="http://erp.pos08.com/QRCode/6818/temp/tmp.png" class="code-img" @click="showImg" show-menu-by-longpress></image> -->
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY || APP-PLUS -->
						<image :src="imgUrl" class="code-img" @click="saveImg"></image>
						<!-- #endif -->
						<view class="img-line img-line1"></view>
						<view class="img-line img-line2"></view>
						<view class="img-line img-line3"></view>
						<view class="img-line img-line4"></view>
						<view class="img-lineY img-lineY1"></view>
						<view class="img-lineY img-lineY2"></view>
						<view class="img-lineY img-lineY3"></view>
						<view class="img-lineY img-lineY4"></view>
					</view>
				</view>
				<view class="code_b">
					<view class="nick">昵称：{{ vuex_user.nickname }}</view>
					<view class="tis">{{tip}}小程序码可保存至相册</view>
				</view>
			</view>
		</view>

		<template v-else-if="imgUrl">
			<!-- 海报分享 -->
			<view class="mo_img">
				<!-- #ifndef MP-ALIPAY || APP-PLUS -->
				<image mode="widthFix" :src="imgUrl" show-menu-by-longpress></image>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY || APP-PLUS -->
				<image mode="widthFix" :src="imgUrl" @click="saveImg"></image>
				<!-- #endif -->
			</view>
			<view class="tisp">{{tip}}海报即可保存/分享</view>
			<view class="post_relat"><button class="sub-btn" open-type="share">分享给好友</button></view>
		</template>
		<view>
			<!-- #ifdef MP-ALIPAY -->
			<canvas style="width: 375px; position: fixed; left: 750rpx; height: 2500rpx;  opacity: 0;" id="codecanvas" />
			<!--  #endif -->
			<!-- #ifndef  MP-ALIPAY -->
			<canvas style="width: 375px; position: fixed; left: 750rpx; height: 2500rpx;  opacity: 0;" canvas-id="codecanvas" />
			<!--  #endif -->
		</view>
	</view>
</template>

<script>
	import {
		pageShare
	} from '@/mixins/pageShare.js';
	import {
		mapState
	} from 'vuex';
	import {
		uniModal,
		uniGetImageInfo
	} from '@/utils/uniPromise.js'

	export default {
		mixins: [pageShare],
		data() {
			return {
				imgUrl: '',
				postUrl: '',
				showType: 0,
				tip: '长按',
				codeimgform: {}, // 海报的解析数据
			};
		},
		onLoad() {
			// #ifdef MP-ALIPAY || APP-PLUS
			this.tip = '点击'
			// #endif
			this.initPage();
			this.customShareParams()
		},
		computed: {
			...mapState(['vuex_businessObj'])
		},
		onShareAppMessage() {
			return this.getShareAppMessage()
		},
		// onShareTimeline: function() {
		// 	return this.getShareTimeline();
		// },
		methods: {
			// 获取二维码
			initPage() {
				this.$loading();
				let path = '/pages/index/index';
				// #ifdef H5
				path = window.location.origin + path
				// #endif
				this.$resPost('SmallProgramQRCode', {
						url: escape(`${path}?superior=${this.vuex_user.pk_id}`),
						type: 4,
						appid: this.vuex_business.appid,
					})
					.then(({
						data
					}) => {
						// let str = this.vuex_businessObj.resquest + data.url || ''
						const str = data.qrcode || ''
						if (data.type == 2) {
							uniGetImageInfo(str).then(res => {
								console.log('成功')
								this.codeimgform = {
									...res
								}
								this.drawcanvas();
							}).catch((err) => {
								console.log('失败')
								this.imgUrl = str
								setTimeout(() => {
									this.$hide();
								}, 500)
							});
						} else {
							this.imgUrl = str
							setTimeout(() => {
								this.$hide();
							}, 500)
						}
						this.showType = data.type;
					})
					.catch(() => {});
			},
			// 展示二维码
			showImg() {
				uni.previewImage({
					current: 0,
					urls: [this.imgUrl]
				});
			},
			// 设置当前产品页的分享参数
			customShareParams() {
				if (!this.shareParams.title) {
					let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
					let curRoute = routes[routes.length - 1].route; //获取当前页面路由
					let curParam = routes[routes.length - 1].options; //获取路由参数
					this.shareParams = {
						title: '',
						path: 'pages/index/index',
						query: {},
						imgUrl: ''
					};
					this.onShareByH5();
				}
			},
			saveImg() {
				uniModal({
					title: '提示',
					content: '是否保存到相册'
				}).then(() => {
					// #ifdef MP-ALIPAY
					my.saveImageToPhotosAlbum({
						filePath: this.imgUrl,
						success: () => {
							this.$toast('保存成功')
						},
						fail: () => {
							this.$toast('保存失败')
						}
					});
					//  #endif
					// #ifndef MP-ALIPAY
					// 先下载图片
					uni.downloadFile({
						url: this.imgUrl,
						success: (res) => {
							// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: "保存成功！",
									});
								},
								fail: () => {
									uni.showToast({
										title: "保存失败",
									});
								},
							});
						},
					});
					//  #endif
				})
			},
			// 开始画海报
			drawcanvas() {
				let that = this
				let allheight = 0
				// #ifdef MP-ALIPAY
				const ctx = my.createCanvasContext('codecanvas', this);
				// #endif

				// #ifdef MP-BAIDU
				const ctx = swan.createCanvasContext('codecanvas', this);
				// #endif

				// #ifndef MP-ALIPAY || MP-BAIDU
				const ctx = uni.createCanvasContext('codecanvas', this);
				// #endif
				ctx.setFillStyle('#ffffff');
				ctx.fillRect(0, 0, 375, 1200);
				let height = 0;
				if (this.codeimgform.path) {
					height = (375 * this.codeimgform.height) / this.codeimgform.width;
					ctx.drawImage(this.codeimgform.path, 0, allheight, 375,
						height); // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
				}
				allheight = allheight + parseInt(height) + 20;
				ctx.setFontSize(16);
				ctx.setFillStyle('#333333');
				ctx.setTextAlign('center')
				ctx.fillText(this.vuex_user.nickname + '邀您抢优惠', 187.5, allheight);
				allheight += 23
				ctx.setFillStyle('#999999');
				ctx.fillText('扫一扫，进入' + this.vuex_business.name, 187.5, allheight);
				ctx.setTextAlign('left')
				ctx.save(); //保存
				allheight += 10
				that.$hide()
				ctx.draw(false, () => {
					// #ifndef MP-ALIPAY
					uni.canvasToTempFilePath({
							quality: 1,
							height: allheight,
							canvasId: 'codecanvas',
							success: function(res) {
								// 在H5平台下，tempFilePath 为 base64
								that.imgUrl = res.tempFilePath;
								that.$hide()
							},
							fail: err => {
								that.$hide()
							}
						},
						this
					);
					//  #endif 
				
					// #ifdef MP-ALIPAY
					// 支付宝只适应png跟jpg图 其他图会出问题
					ctx.toTempFilePath({
							quality: 1,
							height: allheight,
							success: function(res) {
								that.imgUrl = res.apFilePath
								that.$hide()
							},
							fail: err => {
								that.$hide()
							}
						},
				
					);
					//  #endif 
				
				}); //绘制
			},
		}
	};
</script>

<style lang="scss" scoped>
	.flex-ct {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.index-box {
		padding: 154rpx 30rpx 0;
	}

	.code-box {
		width: 100%;
		box-shadow: 0px 5rpx 12rpx 1rpx rgba(0, 0, 0, 0.11);
		border-radius: 10rpx;

		.img-box {
			width: 100%;
			height: 590rpx;
			background: rgba(233, 51, 36, 1);
			border-radius: 10rpx 10rpx 0 0;
		}

		.img-wrap {
			width: 390rpx;
			height: 390rpx;
			position: relative;
		}
	}

	.code_b {
		width: 100%;
		padding: 50rpx 0 40rpx;
		text-align: center;

		.nick {
			font-size: 36rpx;
		}

		.tis {
			margin-top: 16rpx;
			color: #999;
		}
	}

	.img-line {
		width: 50rpx;
		height: 6rpx;
		border-color: 3rpx;
		background-color: #ffffff;
		position: absolute;
	}

	.img-lineY {
		width: 6rpx;
		height: 50rpx;
		border-color: 3rpx;
		background-color: #ffffff;
		position: absolute;
	}

	.img-line1,
	.img-lineY1 {
		top: 0;
		left: 0;
	}

	.img-line2,
	.img-lineY2 {
		top: 0;
		right: 0;
	}

	.img-line3,
	.img-lineY3 {
		bottom: 0;
		left: 0;
	}

	.img-line4,
	.img-lineY4 {
		bottom: 0;
		right: 0;
	}

	.code-img {
		width: 342rpx;
		height: 342rpx;
		background-color: #f3f3f3;
	}

	.mo_img {
		width: 80%;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tisp {
		text-align: center;
		padding: 20rpx 0;
		color: #999;
		font-size: 26rpx;
	}

	.post_relat {
		height: 110rpx;

		.sub-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 110rpx;
			background-color: #e93324;
			border-radius: 0;
			font-size: 36rpx;
			color: #ffffff;
			line-height: 110rpx;
		}
	}
</style>
